<template>
    <el-container>
        <vHeadSpace />
        <el-container>
            <vAsideSpace />
            <el-container>
                <el-main class="unhandled_main">
                    <div class="unhandled_content" >
                        <!--  主机下拉框-->
                        <h4 style="text-align: center;padding: 0;font-size: 1.5rem;margin: 0;font-weight: bolder">未处理告警信息</h4>
                        <div>
                            <el-col :span="7" style="padding-top: 15px">
                                <label> 所有设备：</label>
                                <el-select v-model="hostIds" multiple clearable placeholder="所有设备">
                                    <el-option
                                            v-for="item in online_host_list"
                                            :key="item.hostid"
                                            :label="item.host"
                                            :value="item.hostid">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </div>
                        <!--  严重性多选框-->
                        <el-col :span="13">

                            <label text-align="left">严重性：</label>
                            <div>
                                <el-checkbox-group v-model="checkList" text-align="left">
                                    <el-checkbox label="未分类"/>
                                    <el-checkbox label="信息类"/>
                                    <el-checkbox label="警告"/>
                                    <el-checkbox label="一般严重"/>
                                    <el-checkbox label="严重"/>
                                    <el-checkbox label="灾难"/>
                                </el-checkbox-group>
                            </div>
                        </el-col>
                        <br>
                        <el-col :span="2">
                            <!--            <el-button type="primary" icon="el-icon-search" @click="DashandleSubmit">查找</el-button>-->
                            <el-button type="primary" size="medium" style="margin-bottom: 4px" icon="el-icon-search" @click="handleSubmit(false)">查找</el-button>
                        </el-col>

                        <el-table
                                v-loading="pictLoading"
                                :data="tableData"
                                tooltip-effect="dark"
                                style="width: 100%"
                                element-loading-text="数据正在加载中"
                                :cell-class-name="priorityCss"
                        >
                            <el-table-column min-width="30px" align="center" prop="sequence" label="序号">
                                <template slot-scope="scope">
                                    {{ (currentPage - 1) * pageNum + scope.$index + 1 }}
                                </template>
                            </el-table-column>
                            <!--      <el-table-column prop="clock" label="告警时间" width="180px" align="center"></el-table-column>-->
                            <el-table-column prop="host" label="设备名称" width="150px" align="center"></el-table-column>
                            <el-table-column prop="severity" label="严重性" width="120px" align="center" ></el-table-column>
                            <el-table-column prop="clock" label="时间" width="150px" align="center"></el-table-column>
                            <el-table-column prop="name" width="300px" label="告警内容"  align="center" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    {{scope.row.name}}
                                    <!--注释了推送知识的功能-->
                                    <!--<i class="el-icon-question" @click="pushKnowledge(scope.row)"></i>-->
                                </template>
                            </el-table-column>
                            <el-table-column prop="eventid" label="事件id"  align="center" v-if="show"></el-table-column>
                            <el-table-column prop="operate" label="操作"  align="center">
                                <!--        <template slot-scope="scope">-->
                                <!--          <el-button type="danger" round @click="neglectQuestion(scope.row)">忽略</el-button>-->
                                <!--          <el-button type="danger" round @click="closeQuestion(scope.row)">确认</el-button>-->
                                <!--        </template>-->

                                <template slot-scope="scope">
                                    <el-button-group>
                                        <!--<el-button type="success" icon="el-icon-thumb" @click="insertNewKnowledge(scope.row)" size="mini">新知识录入</el-button>-->
                                        <el-button type="primary" icon="el-icon-close" @click="neglectQuestion(scope.row)" size="mini">忽略</el-button>
                                        <el-button type="success" icon="el-icon-check" @click="closeQuestion(scope.row)" size="mini">确认</el-button>
                                        <el-button type="danger" icon="el-icon-switch-button" @click="closeHost(scope.row)" size="mini">关机</el-button>
                                        <el-button type="warning" icon="el-icon-refresh-left" @click="rebootHost(scope.row)" size="mini">重启</el-button>
                                    </el-button-group>
                                </template>

                            </el-table-column>
                        </el-table>
                        <!--分页控件-->
                        <el-pagination
                                class="unhandled_pagination"
                                :current-page="currentPage"
                                :page-sizes="[10,20,30,40]"
                                :page-size="100"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="totalNum"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                        />
                        <!--对话框，查看详情-->
                        <el-dialog
                                title="关闭问题"
                                :visible.sync="centerDialogVisible"
                                width="70%"
                                center
                                @close="closeProblem">
                            <el-row :gutter="20">
                                <el-col :span="6">
                                    <label>问题：</label>
                                    <el-tag>{{question_name}}</el-tag>
                                </el-col>
                            </el-row>
                            <el-row >
                                <label>解决方案</label>
                                <el-input
                                        v-model="description_detail"
                                        type="textarea"
                                        :rows="4"
                                        placeholder="请输入解决方案"
                                        maxlength="2048"
                                />
                            </el-row>
                            <el-row>
                              <el-table
                                  :data="currentPagePush"
                                  stripe
                                  style="width: 100%">
                                <el-table-column
                                    type="index"
                                    width="50"
                                    :index="knowledgeIndexMethod">
                                </el-table-column>
                                <el-table-column
                                    prop="name_"
                                    label="知识名称"
                                    >
                                </el-table-column>
                                <el-table-column
                                    prop="type_"
                                    label="类型"
                                    >
                                  <template slot-scope="scope">
                                    {{getKnowledgeType(scope.row.type_)}}
                                  </template>
                                </el-table-column>
                                <el-table-column
                                    prop="label"
                                    label="关键字">
                                </el-table-column>
                                <el-table-column
                                    prop="problem"
                                    label="解决问题">
                                </el-table-column>
                                <el-table-column
                                    prop="resolution"
                                    label="解决方案">
                                </el-table-column>
                                <el-table-column
                                    prop="closureDir"
                                    label="附件"
                                    >
                                  <template slot-scope="scope">
                                    <el-button type="warning" icon="el-icon-share" size="mini" @click="checkClosure(scope.row)">查看附件</el-button>
                                  </template>
                                </el-table-column>
                                <el-table-column
                                    label="操作">
                                  <template slot-scope="scope">
                                    <el-button type="success" icon="el-icon-check" size="mini" @click="accept(scope.row)">采纳</el-button>
                                  </template>
                                </el-table-column>
                              </el-table>
                                <!--分页-->
                              <div style="text-align: center;margin-top: 10px;">
                                <el-pagination
                                    background
                                    small
                                    layout="prev, pager, next"
                                    :total="push_total"
                                    :page-size="push_page_size"
                                    :current-page="push_knowledge_current_page"
                                    @current-change="push_current_change">
                                </el-pagination>
                              </div>
                            </el-row>
                            <span slot="footer" class="dialog-footer">
            <el-button @click="closeProblem">取 消</el-button>
            <el-button type="primary" @click="commitMessage">确 定</el-button>
          </span>
                        </el-dialog>

                        <!--让用户输入想要操作的主机的账号和密码-->
                        <el-dialog
                                title="请输入该主机的账号和密码"
                                :visible.sync="dialogVisible"
                                width="30%"
                        >
                            <!-- 输入账号 -->
                            <el-row>
                                <el-col :span="3" style="padding-top: 10px"><label>账号：</label></el-col>
                                <el-col :span="20"><el-input v-model="hostAccount" placeholder="请输入账号"></el-input></el-col>
                            </el-row>
                            <br/>
                            <!-- 输入密码 -->
                            <el-row>
                                <el-col :span="3" style="padding-top: 10px"><label>密码：</label></el-col>
                                <el-col :span="20"><el-input v-model="hostPassword" show-password placeholder="请输入密码"></el-input></el-col>
                            </el-row>

                            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="operateCode == '0'?postShutdownRequest():postRebootRequest()">确 定</el-button>
            </span>
                        </el-dialog>
                        <!--  推送知识对话框  -->
                        <el-dialog
                                title="知识推送"
                                :visible.sync="pushDialogdialogVisible"
                                width="70%">
                            <el-table
                                    :data="currentPagePush"
                                    width="100%">
                                <el-table-column type="index" align="center" label="序号" width="50" />
                                <el-table-column prop="name_" label="知识名称" width="150" align="center" />
                                <el-table-column prop="type_" label="类型" width="100" align="center" >
                                    <template slot-scope="scope">
                                        {{getKnowledgeType(scope.row.type_)}}
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="label"
                                        label="关键字"
                                        align="center"
                                        width="200">
                                </el-table-column>
                                <el-table-column
                                        prop="key_"
                                        label="关联键值或名称"
                                        width="270">
                                </el-table-column>
                                <el-table-column
                                        prop="resolution"
                                        label="解决方案"
                                        width="120"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="submit_user"
                                        label="提交者"
                                        width="100"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="time"
                                        label="提交时间"
                                        width="100"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="closureDir"
                                        label="附件"
                                        width="120"
                                        align="center">
                                    <template slot-scope="scope">
                                        <el-button type="warning" icon="el-icon-share" size="mini" @click="checkClosure(scope.row)">查看附件</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>

                            <div style="text-align: center;margin-top: 30px;">
                                <el-pagination
                                        background
                                        layout="prev, pager, next"
                                        :total="push_total"
                                        :page-size="push_page_size"
                                        :current-page="push_knowledge_current_page"
                                        @current-change="push_current_change">
                                </el-pagination>
                            </div>
                        </el-dialog>
                        <!-- 新增标签弹层 -->
                        <div class="add-form">
                            <el-dialog title="录入新知识"  :visible.sync="addDialogFormVisible" v-if="addDialogFormVisible" width="1000px" :show-close="false">
                                <el-form :model="addFromData" :rules="rules" ref="addFromData" label-width="100px">

                                    <el-row :gutter="4">
                                        <!--知识的标题-->
                                        <el-col :span="8">
                                            <el-form-item label="标题" prop="knowledgeName" >
                                                <el-input v-model="addFromData.knowledgeName" placeholder="知识的名称"/>
                                            </el-form-item>
                                        </el-col>
                                        <!--知识的标签-->
                                        <el-col :span="8">
                                            <el-form-item label="标签" prop="labelName">
                                                <el-input v-model="addFromData.labelName" placeholder="知识的标签"/>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>

                                    <el-row :gutter="4">
                                        <!--知识的类型-->
                                        <el-col :span="8">
                                            <el-form-item label="知识类型" prop="type">
                                                <el-cascader
                                                        v-model="addFromData.type"
                                                        :options="typeOptions"
                                                        :show-all-levels="false"
                                                        :props="{ expandTrigger: 'hover',
                                                     value: 'typeId',
                                                     label: 'typeName'
                                                     }"
                                                        @change="typeHandleChange">
                                                </el-cascader>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>

                                    <el-row :gutter="4">
                                        <!--关联的告警key-->
                                        <el-col :span="16">
                                            <el-form-item label="告警键值" prop="alertKey">
                                                <el-input v-model="addFromData.alertKey" disabled/>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>

                                    <!--解决方案-->
                                    <el-row>
                                        <el-col :span="20">
                                            <el-form-item label="解决方案" prop="description">
                                                <el-input v-model="addFromData.description" type="textarea" />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>

                                    <!--附件的增加-->
                                    <el-row>
                                        <el-col :span="8">
                                            <el-form-item label="上传附件" prop="description">
                                                <!--:on-remove="handleRemove"
                                                        :on-preview="handlePreview"
                                                        :on-remove="handleRemove"-->
                                                <el-upload
                                                        class="upload-demo"
                                                        ref="upload"
                                                        :limit="3"
                                                        multiple
                                                        :action="uploadUrl"
                                                        :on-change="fileChange"
                                                        :on-remove="handleRemove"
                                                        :before-upload="beforeAvatarUpload"
                                                        :before-remove="beforeRemove"
                                                        :file-list="upload.fileList"
                                                        :auto-upload="false">
                                                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                                    <!--<el-button style="margin-left: 10px;" size="small" type="success" @click="httpRequest">上传到服务器</el-button>-->
                                                    <div slot="tip" class="el-upload__tip">文件大小不能超过2M</div>
                                                </el-upload>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="addFormCancelClick()">取消</el-button>
                                    <el-button type="primary" @click="submitForm('addFromData')" :disabled="isSearching">确定</el-button>
                                </div>
                            </el-dialog>
                        </div>
                        <!--  附件列表  -->
                        <div class="closureList">
                            <el-dialog title="附件列表"  :visible.sync="closureDialogvisiable" @close="resetClosureDialog()">&nbsp;
                                <!--@row-click="handleSelectionChange"-->
                                <el-table
                                        :data="closureList"
                                        width="100%"
                                >
                                    <el-table-column type="index" align="center" label="序号" width="50" />
                                    <!--<el-table-column-->
                                    <!--        prop="id"-->
                                    <!--        label="id"-->
                                    <!--        width="150"-->
                                    <!--        align="center">-->
                                    <!--</el-table-column>-->
                                    <el-table-column
                                            prop="name"
                                            label="名称"
                                            width="200"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="user"
                                            label="提交者"
                                            width="150"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="time"
                                            label="提交时间"
                                            width="150"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            label="下载"
                                            width="170"
                                            align="center">
                                        <template slot-scope="scope">
                                            <el-button  type="primary" icon="el-icon-edit" size="mini" @click="download(scope.row)">下载</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-dialog>
                        </div>
                    </div>
                </el-main>
                <vFootSpace />
            </el-container>
        </el-container>
    </el-container>
</template>

<script>
    import axios from "axios";
    export default {
        name: "UnhandledAlert",
        data() {
            return {
                online_host_list: [],
                hostIds: [],    //主机的ID编号
                checkList: [], // 严重性选择
                hosts: [],
                tableData: [], // 表格内部的数据
                pictLoading: false,  //加载项
                currentPage: 1,   //当前页面
                pageNum: 10, // 每页展示多少数据
                totalNum: 0, // 数据总条数
                tohost: '111', //传过来的host名字
                centerDialogVisible: false, // 对话框状态
                description_detail:"",//解决的方案
                question_name:"",
                show:false,//控制event_id是否可见
                event_id:"",//事件的名字
                objectid: "",//objectid
                dialogVisible: false, // 账号密码框的可见性
                operatedId: '', // 操作主机的ID
                hostAccount: '', // 要操作的主机的账号
                hostPassword: '', // 要操作的主机的密码
                operateCode:"0", //0表示关机，1表示重启
                snmp_available:0,
                options: {
                    pagination: true,
                    pageSize: 7,
                    pageList: [5, 10, 20]
                },
                flag: false,
                //推送的知识列表
                pushKnowledgelist:[],
                // 知识推送对话框的可见性
                pushDialogdialogVisible: false,
                //新增知识表单
                addFromData: {
                    knowledgeName: '',
                    labelName: '',
                    type: '',
                    alertKey: '',
                    description: '',
                    approval: '',
                },
                // 新增知识表单可见性
                addDialogFormVisible:false,
                // 上传参数
                upload: {
                    // 是否禁用上传
                    isUploading: false,
                    // 设置上传的请求头部
                    // headers: {Authorization: "Bearer " + getToken()},
                    // 上传的地址
                    url: '/fileManager/uploadfile',
                    // 上传的文件列表
                    fileList: [],
                },
                // 上传文件的url
                uploadUrl: '/fileManager/uploadfile',
                // 校验规则
                rules: {

                    knowledgeName: [{ required: true, message: '知识名称为必填项', trigger: 'blur' }],

                    labelName:[{ required: true, message: '标签名称为必填项', trigger: 'blur' }],

                    type: [{ required: true, message: '类型为必填项', trigger: 'blur' }],

                    alertKey:[{ required: true, message: '键值为必填项', trigger: 'blur' }],

                    description: [{required: false ,trigger: 'blur',type: 'string'},
                        {pattern: /^.{0,2048}$/m,message: '长度为0-2048位'}],
                },
                isSearching: false,
                // 附件详情可见性
                closureDialogvisiable: false,
                //附件详情列表
                closureList: [],
                // 知识分类
                typeOptions: [],
                // 知识分类query
                queryInfo: {
                    type: 3
                },
                // 知识分类的value->label
                knowledgeTypeList: [],
                systemType: '',
                // 推送知识总数
                push_total: 0,
                // 推送知识页面大小
                push_page_size: 4,
                // 推送知识当前页面
                push_knowledge_current_page: 1,
                //
                queryKnowledgeInfo: {
                  nlr: '',
                  pageN: 1,
                  pageS: 2
                },
                // 当前确认页面的commonkey
                acknowledged_info:{
                    key: '',
                    commonkey: '',
                    knowledgeid: ''
                }
            }
        },
        methods: {
            // 加载之后提示未处理告警有多少条
            // alertNumOfProblem() {
            //   this.$message({
            //     message: '当前未处理告警共'+this.totalNum+'条',
            //     type: 'warning'
            //   });
            // },

            echartTo(){

                //从饼图哪里跳转过来
                var loc = location.href;
                var n1 = loc.length;//地址的总长
                var n2 = loc.indexOf("?");//取得=号的位置
                var parameter = decodeURI(loc.substr(n2+1, n1-n2));
                var m1 = parameter.length;//获得每个键值对的长度
                var m2 = parameter.indexOf("=");//获得每个键值对=号的位置
                var value = parameter.substr(m2+1, m1-m2);//获取每个键值对=号后面具体的值
                this.$set(this.checkList,0,value)
                const _this = this
                if(_this.chooseTime === null){
                    _this.chooseTime = ''
                }
                axios({
                    methods: 'get',
                    url: '/problem/get_current_unhandled_problem.action',
                    params: {
                        host_ids: _this.hostids, // hostIds
                        check_list: value, // severity
                        current_page: _this.currentPage,
                        page_size: _this.pageNum
                    }
                }).then((res) => {
                    this.pictLoading = false
                    if (res.data.content.result == null) {
                        _this.tableData = [];
                        // _this.alertNumOfProblem();
                    } else {
                        _this.tableData = res.data.content.result;
                        _this.totalNum = res.data.content.data_num;
                        // _this.alertNumOfProblem();
                    }
                })
            },
            sizeChange(val) {
                this.currentPage = 1
                this.pageSize = val
            },
            ToHost() {
                const _this = this;
                _this.hostIds[1] = this.$route.params.hostid
                let list = ["未分类", "信息类", "一般严重", "警告", "严重", "灾难"]
                axios({
                    methods: 'get',
                    url: '/problem/get_alter_unhandle_events.action',
                    params: {
                        host_ids: _this.hostIds[1].toString(), // hostIds
                        check_list: list.toString(), // severity
                        current_page: _this.currentPage,
                        page_size: _this.pageNum
                    }
                }).then((res) => {
                    this.pictLoading = false
                    if (res.data.content.result == null) {
                        _this.tableData = []
                    } else {
                        _this.tableData = res.data.content.result
                        _this.totalNum = res.data.content.dataNum
                    }
                })
            },
            currentChange: function (currentPage) {
                this.currentPage = currentPage
            },
            DashandleSubmit() {
                const _this = this;
                _this.pictLoading=true;
                if(_this.checkList.length ==0 && _this.hostIds.length ==0){
                    axios({
                        methods: 'get',
                        url: '/problem/get_current_unhandled_problem.action',
                        params: {
                            host_ids: _this.hostIds.toString(), // hostIds
                            check_list: _this.checkList.toString(), // severity
                            current_page: _this.currentPage,
                            page_size: _this.pageNum
                        }
                    }).then((res) => {
                        this.pictLoading = false
                        if (res.data.content.result == null) {
                            _this.tableData = [];
                            // _this.alertNumOfProblem();
                        } else {
                            _this.tableData = res.data.content.result;
                            _this.totalNum = res.data.content.data_num;
                            // _this.alertNumOfProblem();
                        }
                    })
                }else {
                    axios({
                        methods: 'get',
                        url: '/problem/get_alter_unhandle_events.action',
                        params: {
                            host_ids: _this.hostIds.toString(), // hostIds
                            check_list: _this.checkList.toString(), // severity
                            current_page:_this.currentPage,
                            page_size:_this.pageNum,
                        }
                    }).then((res) => {
                        this.pictLoading = false
                        if (res.data.content.result == null) {
                            _this.tableData = [];
                            // _this.alertNumOfProblem();
                        } else {
                            _this.tableData = res.data.content.result;
                            _this.totalNum = res.data.content.dataNum;
                            // _this.alertNumOfProblem();
                        }
                    })
                }
            },
            handleSubmit(isPage) {
                const _this = this;
                if(!isPage) {  // 若不是分页查找，则从第 1页开始分页
                  _this.currentPage = 1
                }
                _this.pictLoading=true
                axios({
                    methods: 'get',
                    url: '/problem/get_current_unhandled_problem.action',
                    params: {
                        host_ids: _this.hostIds.toString(), // hostIds
                        check_list: _this.checkList.toString(), // severity
                        current_page: _this.currentPage,
                        page_size: _this.pageNum
                    }
                }).then((res) => {
                    this.pictLoading = false
                    if (res.data.content.result == null) {
                        _this.tableData = [];
                        // _this.alertNumOfProblem();
                    } else {
                        _this.tableData = res.data.content.result;
                        _this.totalNum = res.data.content.data_num;
                        // _this.alertNumOfProblem();
                    }
                })
            },
            handleSubmit2() {
                const _this = this;
                _this.pictLoading=true
                axios({
                    methods: 'get',
                    url: '/problem/get_current_unhandled_problem.action',
                    params: {
                        host_ids: _this.hostIds.toString(), // hostIds
                        check_list: _this.checkList.toString(), // severity
                        current_page: _this.currentPage,
                        page_size: _this.pageNum,
                        objectid: _this.objectid,

                    }
                }).then((res) => {
                    this.pictLoading = false
                    if (res.data.content.result == null) {
                        _this.tableData = [];
                        // _this.alertNumOfProblem();
                    } else {
                        _this.tableData = res.data.content.result;
                        _this.totalNum = res.data.content.data_num;
                        // _this.alertNumOfProblem();
                    }
                })
            },
            handleSizeChange(val) {
                this.pageNum = val;
                this.handleSubmit();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                // if (this.checkList.length==0 && this.hostIds.length ==0){
                //     this.handleSubmit();
                // }else {
                //     this.DashandleSubmit();
                // }
                this.handleSubmit(true)
            },

      

            getHostList() { // 获取主机列表
                let _this = this;
                _this.tohost = this.$route.params.host
                axios({
                    method: 'get',
                    url: '/demo/get_all_online_host.action'
                }).then(function (response) {
                    let resultList = response.data.content.result
                    _this.online_host_list = resultList;
                }).catch(function (error) {
                    console.log(error)
                })
            },
            //计算严重性的 class
            priorityCss({row, column, rowIndex, columnIndex}) {
                let state = ''
                if (row.priority === "信息" && column.property === "priority") {
                    state = 'priorityInfoColor'
                } else if (row.priority === "警告" && column.property === "priority") {
                    state = 'priorityWarningColor'
                } else if (row.priority === "一般严重" && column.property === "priority") {
                    state = 'priorityGenSeriousColor'
                } else if (row.priority === "严重" && column.property === "priority") {
                    state = 'prioritySeriousColor'
                } else if (row.priority === "灾难" && column.property === "priority") {

                } else if (row.priority === "未分类" && column.property === "priority") {
                    state = 'priorityOtherColor'
                }
                return state
            },
            // 忽略问题方法
            neglectQuestion(val){
                console.log("你点击了忽略问题方法")
                this.question_name=val.name
                this.event_id=val.eventid
                const _this = this;
                var r=confirm("确定要忽略该告警吗？忽略后此类告警将不再提示");
                if (r==true){
                    axios({
                        methods: 'get',
                        url: '/problem/acknowledge_current_unhandled_problem.action',
                        params: {
                            event_id: _this.event_id, // event_id
                            description_detail: '此告警项已被忽略', // 描述
                            question_name:_this.question_name
                        }
                    }).then((res) => {
                        //此处没有处理页面一直加载的问题

                        console.log(res)
                        let flag = res.data.status;
                        if (flag){
                            // this.$message.success("关闭成功！");
                            this.handleSubmit();
                        }else{
                            // this.$message.error("忽略失败！");
                        }
                    })
                }
                else{

                }

            },

            //确认问题方法
            closeQuestion(val)
            {
                // console.log(val)
                this.getCommonKeyById(val.objectid)
                // console.log(this.acknowledged_info)
                this.question_name=val.name
                this.event_id=val.eventid
                this.objectid = val.objectid;
                this.centerDialogVisible = true
                this.pushKnowledge(val);
                this.getKnowledgeByNLR(val);
            },
            closeProblem () {
              this.push_knowledge_current_page = 1;
              this.centerDialogVisible = false;
              this.pushKnowledgelist = [];
              this.description_detail = '';
            },
            // 采纳
            accept (val) {
              this.acknowledged_info.knowledgeid = val.id;
              this.description_detail = val.resolution;
            },
            //提交问题
            commitMessage()
            {
                if (this.description_detail === ''){
                    return this.$message.warning('提交的解决方案不能为空！')
                }else{
                    // console.log("你点击了提交问题方法"+this.description_detail)
                    // console.log("event_id"+this.event_id)
                    this.centerDialogVisible = false
                    const _this = this;
                    // this.adoptKnowledge();
                    // this.$message.success("处理成功！！！")
                    axios({
                        methods: 'get',
                        url: '/problem/acknowledge_current_unhandled_problem.action',
                        params: {
                            event_id: _this.event_id, // event_id
                            description_detail: _this.description_detail, // 描述
                            question_name:_this.question_name
                        }
                    }).then((res) => {
                        //此处没有处理页面一直加载的问题
                        // console.log(res)
                        _this.description_detail = ''
                        let flag = res.data.status;
                        if (flag){
                            this.$message.success("关闭成功！");
                            this.adoptKnowledge();
                            this.handleSubmit2();
                        }else{
                            this.$message.error("关闭失败！");
                        }
                    })
                }
            },
            // 通过关机或重启解决未处理告警问题
            closeAlertByShutdownOrReboot (eventId,temp){
                this.event_id=eventId
                const _this = this;
                let strtemp;
                if (temp==0)
                    strtemp = '关机'
                else
                    strtemp = '重启'

                axios({
                    methods: 'get',
                    url: '/problem/acknowledge_current_unhandled_problem.action',
                    params: {
                        event_id: _this.event_id, // event_id
                        description_detail: strtemp, // 描述
                        question_name:_this.question_name
                    }
                }).then((res) => {
                    //此处没有处理页面一直加载的问题
                    console.log(res)
                    _this.description_detail = ''
                    let flag = res.data.status;
                    if (flag){
                        this.handleSubmit();
                    }else{
                    }

                })
            },
            //判定服务器还是网络设备
            isServer(val) {
                const _this = this;
                this.$axios({
                    method: "post",
                    url: '/report/get_a_host.action',
                    data: {
                        hostid: val
                    },
                }).then((response) => {
                    _this.snmp_available = parseInt(response.data.content.result[0].snmp_available)
                }).catch((error) => {
                    console.log(error);
                })
            },

            // 判断操作系统类型
            checkSystemType(hostid) {
                this.$axios.get('host/checkHostSystemType.action?hostid=' + hostid).then((response) => {
                    this.systemType = parseInt(response.data.content.systemType)
                    console.log(this.systemType);
                }).catch((err)=>{
                    console.log(err);
                })
            },

            //点击关机按钮
            closeHost(row){
                const _this = this;
                _this.isServer(row.hostid);

                setTimeout(()=>{// 等待请求完成
                    if (_this.snmp_available !== 1 && _this.snmp_available !== 2) {
                        _this.checkSystemType(row.hostid)
                        setTimeout(()=>{
                            if ( _this.systemType !== 1) {
                                this.$message({
                                    message: 'Windows主机暂不支持关机',
                                    duration: 1500,
                                    type: 'warning'
                                })
                                return 0
                            } else {
                                this.$confirm('是否确认关机主机' + row.host, '提示', {
                                    confirmButtonText: '确定',
                                    cancelButtonText: '取消',
                                    type: 'warning'
                                }).then(() => {
                                    axios.get('host/getUserInfo.action?hostid=' + row.hostid).then((res) => {
                                        // console.log(res.data.content)
                                        if (res.data.status) {
                                            _this.hostAccount = res.data.content.username
                                            _this.hostPassword = res.data.content.password
                                            // _this.dialogVisible = true;    // 显示对话框
                                            _this.operatedId = row.hostid  // 赋值要操作的ID
                                            _this.operateCode = "0"

                                            //关闭该条告警项
                                            _this.$options.methods.closeAlertByShutdownOrReboot(row.eventid,0)
                                        } else {
                                            this.$message({
                                                type: 'error',
                                                message: '设备用户名密码错误，请在设备管理中更新'
                                            });
                                        }
                                        _this.postRebootRequest();
                                    }).catch(() => {
                                        console.error(res.data)
                                    })
                                }).catch(() => {
                                    this.$message({
                                        type: 'info',
                                        message: '已取消关机'
                                    });
                                });
                            }
                        },500)
                    }else {
                        this.$message({
                            message: '网络设备不支持关机',
                            duration: 1500,
                            type: 'warning'
                        })
                        _this.snmp_available = 0
                        return 0
                    }
                },500)
            },

            // 重启服务器
            rebootHost(row){
                const _this = this;
                _this.isServer(row.hostid);
                setTimeout(()=>{// 等待请求完成
                    if (_this.snmp_available !== 1 && _this.snmp_available !== 2) {
                        _this.checkSystemType(row.hostid)
                        setTimeout(()=>{
                            if ( _this.systemType !== 1) {
                                this.$message({
                                    message: 'Windows主机暂不支持重启',
                                    duration: 1500,
                                    type: 'warning'
                                })
                                return 0
                            } else {
                                this.$confirm('是否确认重启主机' + row.host, '提示', {
                                    confirmButtonText: '确定',
                                    cancelButtonText: '取消',
                                    type: 'warning'
                                }).then(() => {
                                    axios.get('host/getUserInfo.action?hostid=' + row.hostid).then((res) => {
                                        // console.log(res.data.content)
                                        if (res.data.status) {
                                            _this.hostAccount = res.data.content.username
                                            _this.hostPassword = res.data.content.password
                                            // _this.dialogVisible = true;    // 显示对话框
                                            _this.operatedId = row.hostid  // 赋值要操作的ID
                                            _this.operateCode = "1"

                                            //关闭该条告警项
                                            _this.$options.methods.closeAlertByShutdownOrReboot(row.eventid,1)
                                        } else {
                                            this.$message({
                                                type: 'error',
                                                message: '设备用户名密码错误，请在设备管理中更新'
                                            });
                                        }
                                        _this.postRebootRequest();
                                    }).catch(() => {
                                        console.error(res.data)
                                    })
                                }).catch(() => {
                                    this.$message({
                                        type: 'info',
                                        message: '已取消重启'
                                    });
                                });
                            }
                        },500)
                    } else {
                        this.$message({
                            message: '网络设备不支持重启',
                            duration: 1500,
                            type: 'warning'
                        })
                        _this.snmp_available = 0
                        return 0
                    }
                },500)

            },

            // 发送关机请求
            postShutdownRequest(){
                let _this = this;
                // 设置正在处理，让用户有所感知
                const loading = this.$loading({
                    lock: true,
                    text: '正在处理',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });

                axios({
                    method: 'get',
                    url: '/host_management/send_shutdown_to_host.action',
                    params: {
                        hostId: _this.operatedId,
                        account: _this.hostAccount,
                        password: _this.hostPassword
                    }
                }).then((res) => {
                    loading.close();
                    this.dialogVisible = false;
                    this.$message({
                        type: 'success',
                        message: '发送关机命令成功'
                    });
                }).catch(() => {
                    loading.close();
                    this.dialogVisible = false;
                    this.$message({
                        type: 'error',
                        message: '关机失败，目标主机尚不支持关机或账号密码错误'
                    });
                });
            },

            // 发送重启请求
            postRebootRequest(){
                let _this = this;
                // 设置正在处理，让用户有所感知
                const loading = this.$loading({
                    lock: true,
                    text: '正在处理',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });

                axios({
                    method: 'get',
                    url: '/host_management/send_reboot_to_host.action',
                    params: {
                        hostId: _this.operatedId,
                        account: _this.hostAccount,
                        password: _this.hostPassword
                    }
                }).then((res) => {
                    loading.close();
                    this.dialogVisible = false;
                    this.$message({
                        type: 'success',
                        message: '发送重启命令成功'
                    });
                }).catch(() => {
                    loading.close();
                    this.dialogVisible = false;
                    this.$message({
                        type: 'error',
                        message: '重启失败，目标主机尚不支持重启或账号密码错误'
                    });
                })
            },
            // 点击推送知识
            pushKnowledge(val) {
                axios.post('/trigger/getKnowledgeByID.action',
                    {triggerid:val.objectid})
                    .then((res) => {
                        if (res.data.status){
                            // console.log(this.pushKnowledgelist)
                            // console.log(res);
                            // this.pushKnowledgelist = this.pushKnowledgelist.concat(res.data.content.knowledgeList);
                            this.pushKnowledgelist = res.data.content.knowledgeList.concat(this.pushKnowledgelist);
                            this.push_total = this.pushKnowledgelist.length
                            // this.pushDialogdialogVisible = true
                            // console.log(this.pushKnowledgelist)
                            var temp = []
                            for (let i = 0; i < this.pushKnowledgelist.length; i++) {
                              var o = this.pushKnowledgelist[i];
                              if (temp.indexOf(o.id+"") !== -1) this.pushKnowledgelist.splice(i, 1);
                              else temp.push(o.id);
                            }
                            // console.log(this.pushKnowledgelist)
                        }else{
                            this.$message.warning("无相关知识，请录入！")
                        }
                    }).catch(() => {
                    this.$message.warning("无相关知识，请录入！")
                });
            },
            async getKnowledgeByNLR(val) {
              const {data: res} = await axios.post('solrSearch/get_solr_result_by_nlr.action', {nlr: val.name});
              console.log("执行getKnowledgeByNLR");
              console.log(res);
              this.pushKnowledgelist = res.content.resultData
            },
            // 录入新知识点击
            insertNewKnowledge(val){
                this.getKeyById(val.objectid)
            },
            // 根据告警项查询具体键值
            getKeyById(val){
                axios.post('/trigger/getKeyByID.action',
                    {triggerid:val})
                    .then((res) => {
                        // console.log(res);
                        if (res.data.status){
                            this.addFromData.alertKey = res.data.content.key;
                            this.addDialogFormVisible = true;
                        }else{
                            return this.$message.error("获取告警信息失败！")
                        }
                    }).catch(() => {
                    return this.$message.error("获取告警信息失败！")
                });
            },
            // 文件改变时
            fileChange(file, fileList) {
                this.upload.fileList = fileList
            },
            // 文件移除之前
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${file.name}？`);
            },
            // 移除附件
            handleRemove(file, fileList) {
                this.upload.fileList = fileList
            },
            // 文件预上传格式限制
            beforeAvatarUpload(file) {
                // const isJPG = file.type === 'image/jpeg'
                // const isPng = file.type === 'image/png'
                // const isLt2M = file.size / 1024 / 1024 < 2
                //
                // if (!isJPG && !isPng) {
                //     this.$message.error('上传图片只能是 JPG或png 格式!')
                // }
                // if (!isLt2M) {
                //     this.$message.error('上传图片大小不能超过 2MB!')
                // }
                // return (isJPG || isPng) && isLt2M
            },
            // 录入知识对话框关闭事件
            addFormCancelClick() {
                this.addDialogFormVisible = false
                this.isSearching = false
                this.restAddForm()
            },
            // 重置增添知识表单
            restAddForm() {
                // this.backgroundColor="#827e87"
                this.addFromData = {
                    knowledgeName: '',
                    labelName: '',
                    type: '',
                    alertKey: '',
                    description: ''
                }
                this.upload.fileList = []
            },
            // 新增知识提交按钮
            submitForm(addFromData) {
                this.$refs[addFromData].validate(valid => {
                    if (valid) {
                        this.addFromData.approval = '待审批'
                        let formData = new FormData()
                        this.upload.fileList.forEach(file => {
                            formData.append('file', file.raw)
                        })
                        formData.append("submit_user",sessionStorage.getItem("username"))
                        formData.append("knowledgeName", this.addFromData.knowledgeName)
                        formData.append("labelName", this.addFromData.labelName)
                        formData.append("type", this.addFromData.type)
                        formData.append("alertKey", this.addFromData.alertKey)
                        formData.append("description", this.addFromData.description)
                        formData.append("approval", this.addFromData.approval)
                        axios.post('/konwledgeBase/createKonwledge.action', formData).then((res) => {
                            if (res.data.status) { // 执行成功
                                // 关闭新增窗口
                                this.addDialogFormVisible = false
                                // 弹出提示信息
                                this.$message({
                                    message: '知识录入成功！',
                                    type: 'success'
                                })
                                this.restAddForm()
                            } else { // 执行失败
                                // 弹出提示
                                this.$message.error('知识录入失败！')
                            }
                        })
                    }else {
                        return false;
                    }
                })
            },
            // 附件查看
            checkClosure(val) {
                axios.post('/fileManager/getClosureByID.action',
                    {id:val.id})
                    .then((res) => {
                        console.log(res);
                        if (res.data.status){
                            // console.log(res.data.content.closures);
                            if (res.data.content.closures.length != 0) {
                                for (let i = 0; i < res.data.content.closures.length; i++) {
                                    var file_id = res.data.content.closures[i].file_id
                                    var file_user = res.data.content.closures[i].submit_user
                                    var submit_time = res.data.content.closures[i].submit_time
                                    var file_dir = res.data.content.closures[i].file_dir
                                    var tempFile = res.data.content.closures[i].file_dir
                                    var tempName = tempFile.substring(tempFile.lastIndexOf("_") + 1)
                                    var name = tempName
                                    this.closureList.push({id:file_id,dir:file_dir,name:name,user:file_user,time:submit_time})
                                }
                                // console.log(this.closureList);
                                this.closureDialogvisiable = true
                            }else {
                                this.$message.warning("当前知识无附件！")
                            }
                        }else{
                            this.$message.error("查看附件失败！")
                        }
                    }).catch(() => {
                    this.$message.error("查看附件失败！")
                });
            },
            // 下载附件
            download(val) {
                // console.log('val',val)
                this.$confirm('确认下载该附件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method:'post',
                        url:'/fileManager/download2.action',
                        data:val,
                        // 二进制流文件，一定要设置成blob，默认是json
                        responseType: 'blob'
                    }).then((res)=> {
                        // console.log(res)
                        let link = document.createElement("a");
                        link.style.display = "none";
                        link.href = window.URL.createObjectURL(new Blob([res.data]));
                        // link.setAttribute("download",row.zurl.substring(row.zurl.lastIndexOf("/")+1));//文件名
                        link.setAttribute("download",val.name);//文件名
                        document.body.appendChild(link);
                        link.click();
                        URL.revokeObjectURL(link.href);
                        document.body.removeChild(link);
                    })
                }).catch((error) => {
                    console.log(error)
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    })
                })
            },
            // 重置 附件列表
            resetClosureDialog(){
                this.closureList = []
            },
            // 获取分类列表
            getAllKnowledgeType(){
                axios.post('/konwledgeBase/get_all_type.action', {params: this.queryInfo}).then((res) => {
                    if (res.data.status) { // 执行成功
                        this.typeOptions = res.data.content.result
                        this.getTreeData(this.typeOptions)
                        console.log(this.typeOptions)
                    } else { // 执行失败
                        // 弹出提示
                        this.$message.error('获取知识类型失败！')
                    }
                })

            },
            // 知识类型的切换时的事件
            typeHandleChange(val) {
                console.log(val);
            },
            // 递归函数
            getTreeData(datas) {
                for(var i in datas){
                    var id = datas[i].typeId
                    var name = datas[i].typeName
                    this.knowledgeTypeList.push({id:id,name:name})
                    if(datas[i].children){
                        this.getTreeData(datas[i].children);
                    }
                }
            },
            //获取具体知识类型
            getKnowledgeType(typeStr) {
                var lastType = typeStr.substring(typeStr.lastIndexOf(',')+1)
                for (let i = 0; i < this.knowledgeTypeList.length; i++) {
                    if (this.knowledgeTypeList[i].id == lastType){
                        return this.knowledgeTypeList[i].name
                    }
                }
            },
            //
            push_current_change(currentPage){
                //换页
                // 设置最新的页码
                this.push_knowledge_current_page = currentPage
                console.log("currentPage",currentPage)
            },
            // 根据告警项查询具体键值
            getCommonKeyById(val){
                axios.post('/trigger/getKeyByID.action',
                    {triggerid:val})
                    .then((res) => {
                        // console.log(res);
                        if (res.data.status){
                            this.acknowledged_info.key = res.data.content.key;
                            this.acknowledged_info.commonkey = res.data.content.commonKey;
                            this.acknowledged_info.knowledgeid;
                        }else{
                            return this.$message.error("获取告警信息失败！")
                        }
                    }).catch(() => {
                    return this.$message.error("获取告警信息失败！")
                });
            },
            // 采纳
            adoptKnowledge(){
                axios.post('/konwledgeBase/adoptKnowledge.action',
                    {   knowledgeid:this.acknowledged_info.knowledgeid,
                        commonkey:this.acknowledged_info.commonkey})
                    .then((res) => {
                        console.log(res)
                    })
            },
            // 知识首页序号连续
            knowledgeIndexMethod(index) {
                return index + (this.push_knowledge_current_page-1) * this.push_page_size + 1;
            },
        },

        mounted() {
            this.getAllKnowledgeType()
            if (this.$route.fullPath == '/unhandledalert' ){//首页和拓扑视图未处理告告警跳转
                this.getHostList();
                if (typeof (this.tohost)=='undefined'){
                    this.handleSubmit();
                }else{
                    this.ToHost();
                }
            }else if ( this.$route.fullPath == '/UnhandledAlert') {
                this.getHostList();
                this.handleSubmit();
                this.getHostList();
            }else {
                this.echartTo();
                this.getHostList();
            }
        },
        computed: {
            // 计算当页的触发器
            currentPagePush: function () {
                let start = (this.push_knowledge_current_page - 1) * this.push_page_size
                let end = start + this.push_page_size
                if (end >= this.pushKnowledgelist.length)
                    end = this.pushKnowledgelist.length
                //截取字符串
                return this.pushKnowledgelist.slice(start, end);
            },
        }
    }
</script>

<style scoped >
    .unhandled_main {
        padding: 10px;
        height: 92vh;
        width: 100%;
        margin-top: 56px;
    }
    .unhandled_content{
        height: 97%;
        width: 100%;
        margin-top: 0;
        overflow-y:auto;
    }
    .unhandled_pagination {
        white-space: nowrap;
        padding: 2px 5px;
        color: #303133;
        text-align: center;
        font-weight: 700;
    }
    /*严重性class*/
    .priorityOtherColor {
        background: #827e87;
    }
    .priorityInfoColor {
        background: #659DFF;
    }
    .priorityWarningColor {
        background: #FFCB1D;
    }
    .priorityGenSeriousColor {
        background: #FF8C55;
    }
    .prioritySeriousColor {
        background: #e05a31;
    }
    .priorityDisasterColor {
        background: red;
    }
    .footer {
        position:absolute;
        color:#000;
        bottom:0;
        width: 87%;
        height:23px;
        text-align:center;
        /*background-color: rgb(240, 242, 245);*/
    }
</style>
